import React, { useEffect, useState } from "react";



import * as echarts from "echarts/core";
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { LineChart, PieChart } from "echarts/charts";
import { UniversalTransition, LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  PieChart,
  CanvasRenderer,
  UniversalTransition,
  LabelLayout,
]);




const Indemnity = ({ address }) => {

  // 全国时使用的数据
  const testData = [
    {
      riskName: '财产基本险',
      relation: "20%",
      clic: '台风',
      money: 2233,
    },
    {
      riskName: '电梯安全险',
      relation: "30%",
      clic: '台风',
      money: 447
    },
    {
      riskName: '家庭财产险',
      relation: '5%',
      clic: '台风',
      money: 886
    },
    {
      riskName: '建筑工程险',
      relation: '25%',
      clic: '台风',
      money: 644
    },
    {
      riskName: '道路承运险',
      relation: '5%',
      clic: '台风',
      money: 22
    },
    {
      riskName: '驾驶培训险',
      relation: '15%',
      clic: '台风',
      money: 22
    }
  ]

  // 切换到某省的时候用的数据
  const test1Data = [
    {
      riskName: '财产基本险',
      relation: "10%",
      clic: '台风',
      money: 2233,
    },
    {
      riskName: '电梯安全险',
      relation: "30%",
      clic: '台风',
      money: 447
    },
    {
      riskName: '家庭财产险',
      relation: '35%',
      clic: '台风',
      money: 886
    },
    {
      riskName: '建筑工程险',
      relation: '65%',
      clic: '台风',
      money: 644
    },
    {
      riskName: '道路承运险',
      relation: '52%',
      clic: '台风',
      money: 22
    },
    {
      riskName: '驾驶培训险',
      relation: '35%',
      clic: '台风',
      money: 22
    }
  ]

  const test2Data = [
    {
      riskName: '财产基本险',
      relation: "30%",
      clic: '台风',
      money: 2233,
    },
    {
      riskName: '电梯安全险',
      relation: "20%",
      clic: '台风',
      money: 447
    },
    {
      riskName: '家庭财产险',
      relation: '2%',
      clic: '台风',
      money: 886
    },
    {
      riskName: '建筑工程险',
      relation: '15%',
      clic: '台风',
      money: 644
    },
    {
      riskName: '道路承运险',
      relation: '55%',
      clic: '台风',
      money: 22
    },
    {
      riskName: '驾驶培训险',
      relation: '25%',
      clic: '台风',
      money: 22
    }
  ]

  const [list, setList] = useState(testData);

  useEffect(() => {
    switch (address) {
      case "中国": setList(testData); break;
      case "广东省": setList(test1Data); break;
      default: setList(test2Data);
    }
  }, [address])

  return (
    <div style={{ width: '100%', padding: 10, height: '100%', }}>
      <div className="head"
        style={{ display: 'flex', border: 'none', borderBottom: '1px solid white', padding: '5px 0' }}
      >
        <div className="col" style={{ flex: 1, textAlign: 'center' }}>险种</div>
        <div className="col" style={{ flex: 1, textAlign: 'center' }}>保额占比</div>
        <div className="col" style={{ flex: 1, textAlign: 'center' }}>保额</div>
      </div>
      <div className="list"  >
        {
          list.map((data, index) => {
            return <div className="item" style={{ display: 'flex' }} key={index}>
              <div style={{ flex: 1, padding: '5px 2px' }}>
                <div className="col" style={{ width: '100%', textAlign: 'center', border: 'none', borderRight: '1px solid white' }}>{data.riskName}</div>
              </div>
              <div style={{ flex: 1, padding: '5px 2px' }}>
                <div className="col" style={{ width: '100%', textAlign: 'center', border: 'none', borderRight: '1px solid white' }}>{data.relation}</div>
              </div>
              <div style={{ flex: 1, padding: '5px 2px' }}>
                <div className="col" style={{ width: '100%', textAlign: 'center' }}>{data.money}</div>
              </div>
            </div>
          })
        }

      </div>
    </div>
  );

}

export default Indemnity